<case value="dateranger">
    <div class="form-group item_{$[type]form.name} {$[type]form.extra.class|default=''}">
        <label class="left control-label">
            <?php if($[type]form['extra']['must']): ?>
                <span style="color: red;">*</span>
            <?php endif; ?>
            <span>{$[type]form.title}：</span>
        </label>
        <div class="right">
            <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                <input type="text" id="[type]{$group_k|default=''}_date_{$[type]k}" name="{$[type]form.name}" class="form-control input dateranger" value="<notempty name='[type]form.value'><if condition="is_numeric($[type]form['value'])">{$[type]form.value|time_format='Y-m-d'}<else />{$[type]form.value|default=''}</if></notempty>" placeholder="{$[type]form.title}" {$[type]form.extra.attr|default=''}>
            </div>
            <link rel="stylesheet" href="__PUBLIC__/libs/bootstrap-daterangepicker/daterangepicker.css">
            <script src="__PUBLIC__/libs/moment/moment.min.js"></script>
            <script src="__PUBLIC__/libs/bootstrap-daterangepicker/daterangepicker.js"></script>
            <script type="text/javascript">
                $(function(){
                    // 初始化日期范围插件
                    $('#[type]{$group_k|default=''}_date_{$[type]k}').daterangepicker({
                        "showDropdowns": true,
                        "autoApply": false,
                        // "dateLimit": {
                        //     "days": 365 * 100
                        // },
                        "linkedCalendars": false,
                        "opens" : 'right',
                        "ranges": {
                            "一周内": [
                                moment().subtract(6, 'days'),
                                moment()
                            ],
                            "一月内": [
                               moment().subtract(29, 'days'),
                               moment()
                            ],
                            "本月内": [
                                moment().startOf('month'),
                                moment().endOf('month')
                            ],
                            "上个月": [
                                moment().subtract(1, 'month').startOf('month'),
                                moment().subtract(1, 'month').endOf('month')
                            ]
                        },
                        autoUpdateInput: false,
                        locale : {
                            format: 'YYYY-MM-DD',
                            separator: ' - ',
                            applyLabel: '确定',
                            cancelLabel: '取消',
                            fromLabel: '从',
                            toLabel: '到',
                            customRangeLabel: '日期范围',
                            daysOfWeek: ['日', '一', '二', '三', '四', '五','六'],
                            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                            firstDay: 1
                        },
                        "minDate": "YYYY-MM-DD",
                        "maxDate": "YYYY-MM-DD"
                    }, function(start, end, label) {
                        console.log("New date range selected: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + " (predefined range: " + label + ")");
                    });

                    $('#[type]{$group_k|default=''}_date_{$[type]k}').on('apply.daterangepicker', function(ev, picker) {
                          $(this).val(picker.startDate.format('YYYY-MM-DD') + '~' + picker.endDate.format('YYYY-MM-DD'));
                    });

                    $('#[type]{$group_k|default=''}_date_{$[type]k}').on('cancel.daterangepicker', function(ev, picker) {
                        $(this).val('');
                    });
                })
            </script>
        </div>
    </div>
</case>
